<template>
  <div class="site-infor-pop">
    <div class="site-infor-pop-title">站点信息</div>
    <div class="site-infor-pop-content">
      <!-- <div class="site-infor-pop-content-item" v-for="(item, index) in siteInforPopData" :key="index">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
        <img :src="item.icon" alt="" srcset="" v-if="item.icon" class="icon" />
      </div> -->
      <div class="site-infor-pop-content-item">
        <span>站点名称：</span>
        <span>凤凰山站(下行）</span>
      </div>
      <div class="site-infor-pop-content-item">
        <span>途径车辆：</span>
        <span>602路、53路、24路</span>
      </div>
      <div class="site-infor-pop-content-item">
        <span>今日客流：</span>
        <span>1025人</span>
      </div>
      <div class="site-infor-pop-content-item">
        <span>即将到达：</span>
        <div class="more-item-right">
          <div>
            <span>桂A38202(30s)</span>
            <img src="../../../../../assets/images/situational-awareness/dingwei.png" alt="" srcset="" class="icon" @click="onVisibleCarPop" />
          </div>
          <div>
            <span>桂A38202(1分钟)</span>
            <img src="../../../../../assets/images/situational-awareness/dingwei.png" alt="" srcset="" class="icon" @click="onVisibleCarPop" />
          </div>
        </div>
      </div>
      <div class="site-infor-pop-content-item">
        <span>最近经过：</span>
        <span>桂A38202(1分钟）</span>
      </div>
      <div class="site-infor-pop-content-item">
        <span>站点监控：</span>
        <div class="more-item-right">
          <div>
            <span>出站口监控1</span>
            <img src="../../../../../assets/images/situational-awareness/jiankong.png" alt="" srcset="" class="icon" @click="onVisibleCarPop" />
          </div>
          <div>
            <span>出站口监控2</span>
            <img src="../../../../../assets/images/situational-awareness/jiankong.png" alt="" srcset="" class="icon" @click="onVisibleCarPop" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
@Component({
  name: 'site-infor-pop'
})
export default class SiteInforPop extends Vue {
  // @Prop({
  //   default: () => [
  //     {
  //       label: '站点名称：',
  //       value: '凤凰山站(下行）'
  //     },
  //     {
  //       label: '途径车辆：',
  //       value: '602路、53路、24路'
  //     },
  //     {
  //       label: '今日客流：',
  //       value: '1025人'
  //     },
  //     {
  //       label: '即将到达：',
  //       value: '桂A56202（30s) 桂A56242（1分钟)',
  //       icon: require('assets/images/situational-awareness/dingwei.png')
  //     },
  //     {
  //       label: '最近经过：',
  //       value: '桂A38202(1分钟）'
  //     },
  //     {
  //       label: '站点监控：',
  //       value: '出口监控1 出口监控2',
  //       icon: require('assets/images/situational-awareness/jiankong.png')
  //     }
  //   ]
  // })
  // private siteInforPopData!: any[]
  @Emit()
  private onVisibleCarPop() {}
}
</script>

<style lang="scss" scoped>
.site-infor-pop {
  box-sizing: border-box;
  width: 294px;
  height: auto;
  border-radius: 8px;
  background: rgba(1, 19, 67, 0.6);
  padding: 22px 20px 20px 20px;
  text-align: left;
  font-family: 'PingFang Regular';
  box-shadow: 0px 3px 20px 3px rgba(3, 125, 220, 0.7);
  &-title {
    font-size: 20px;
    font-weight: bold;
    height: 30px;
    line-height: 10px;
  }
  &-content {
    box-sizing: border-box;
    height: calc(100% - 30px);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    &-item {
      display: flex;
      align-items: flex-start;
      box-sizing: border-box;
      width: 100%;
      // height: 28px;
      height: auto;
      position: relative;
      padding-left: 20px;
      margin-bottom: 5px;
      .more-item-right {
        display: flex;
        flex-direction: column;
        div {
          display: flex;
          align-items: center;
        }
      }
      &::after {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #0c81fe;
        position: absolute;
        left: 0;
        top: 19%;
        transform: translate(0, 0%);
      }
      .icon {
        width: 16px;
        height: 16px;
        padding-left: 5px;
      }
    }
  }
}
</style>
